<template>
  <div style="width: 100%;height: 100vh;">
    <a-spin :loading="loading" style="display:block; width: 100%;height: 100vh;" :tip="tip">
      <mt-edit ref="MtEditRef" @on-save-click="onSaveClick" @on-preview-click="onPreviewClick"
        @on-return-click="onReturnClick">
        <template #deviceBind="{ item }">
          <DeviceBind :hand-item-info="item" :stationType="projectInfo.stationType" :projectId="projectId"></DeviceBind>
        </template>
      </mt-edit>
    </a-spin>
    <div v-if="visible">
      <a-modal v-model:visible="visible" :hide-title="true" :hide-cancel="true" fullscreen>
        <Preview :projectId="projectId"></Preview>
      </a-modal>
    </div>
  </div>
</template>
<script setup lang="ts">
import { MtEdit } from 'maotu';
import 'maotu/dist/style.css';
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref } from 'vue';
import DeviceBind from './device-bind.vue'
import Preview from '../preview/index.vue'

import { IExportJson } from 'maotu/dist/src/components/mt-edit/components/types.js';
import {
  getWebtopoProject, updateWebtopoProject
} from '../../../api/webtopo'
import { Notification } from "@arco-design/web-vue";

/*************************** 变量区域 begin ***************************/
//路由信息
const route = useRoute();
const router = useRouter();
//项目ID
const projectId = ref<string>('');
//token
const token = ref<string>();
const loading = ref<boolean>(false);
projectId.value = route.params.projectId.toString();
token.value = route.params.token.toString();
sessionStorage.setItem("token", token.value);
const MtEditRef = ref<InstanceType<typeof MtEdit>>();
const projectInfo = ref<any>({});
const tip = ref<string>("加载中");
const visible = ref<boolean>(false);
/*************************** 变量区域 end ***************************/


/*************************** 方法区域 begin ***************************/

/**
 * 保存数据
 * @param exportJson 
 */
const onSaveClick = async (exportJson: IExportJson) => {
  try {
    loading.value = true;
    tip.value = "保存中";
    console.log(exportJson, '这是要保存的数据');
    projectInfo.value.dataModel = JSON.stringify(exportJson);
    console.log("projectInfo.value=>", projectInfo.value);
    let res = await updateWebtopoProject(projectInfo.value);
    notification(res);
  } catch (err) {

  } finally {
    loading.value = false;
  }

}
/**
 * 返回
 */
const onReturnClick = () => {
  router.go(-1);
}

/**
 * 预览
 */
const onPreviewClick = () => {
  visible.value = true;
}

/**
 * 加载数据
 */
const fetchData = async () => {
  try {
    loading.value = true;
    tip.value = "加载中";
    let res = await getWebtopoProject(projectId.value);
    if (res.code == 200) {
      projectInfo.value = res.data;
      if (res.data.dataModel && res.data.dataModel.length > 0) {
        MtEditRef.value?.setImportJson(JSON.parse(res.data.dataModel));

      } else {
        MtEditRef.value?.setImportJson({
          canvasCfg: {
            width: 1920,
            height: 1080,
            scale: 1,
            color: '#000000',
            img: '',
            guide: true,
            adsorp: true,
            adsorp_diff: 3,
            transform_origin: {
              x: 0,
              y: 0
            },
            drag_offset: {
              x: 0,
              y: 0
            }
          },
          gridCfg: {
            enabled: false,
            align: true,
            size: 10
          },
          json: []
        });
      }
    }
  } catch (err) {

  } finally {
    loading.value = false;
  }
}


/**
 * 消息提示
 * @param res 通知数据
 */
const notification = (res: any) => {
  Notification[res.code === 200 ? 'success' : 'error']({
    title: '提示',
    content: res.msg
  })
}



/*************************** 方法区域 end ***************************/

onMounted(async () => {
  if (projectId.value && projectId.value.length > 0) {
    await fetchData();
  } else {
    router.go(-1);
  }
  document.querySelector(".el-text").innerHTML = "阿帕图能源";
  document.querySelector(".el-footer").style.display = "none";
  document.querySelector(".el-image__inner").src = "/logo.png"
})
</script>
<style scoped></style>
